<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Baidu Map </title>
    <style type="text/css">
        html{height:100%}
        body{height:100%;margin:0px;padding:0px}
        #container{height:100%}
    </style>
    <!--2.引入百度地图API文件-->
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=RjELxBH02RIyZPjhgxymZSSX1ZfjpbI0"></script>
</head>
<body>
<!--1.编写html页面让地图容器充满页面-->
<div id="container">

</div>


<script>

<!--3.初始化地图-->
    var map = new BMapGL.Map("container");          // 创建地图实例
    var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标
    map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    //map.setHeading(64.5);   //设置地图旋转角度
    //map.setTilt(73);       //设置地图的倾斜角度
    //添加控件
    var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
    map.addControl(scaleCtrl);
    var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
    map.addControl(zoomCtrl);
    var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
    map.addControl(cityCtrl);
/*4.覆盖物*/

var marker = new BMapGL.Marker(point);        // 创建标注
map.addOverlay(marker);                     // 将标注添加到地图中

var myIcon = new BMapGL.Icon("img/", new BMapGL.Size(23, 25), {
    // 指定定位位置。
    // 当标注显示在地图上时，其所指向的地理位置距离图标左上
    // 角各偏移10像素和25像素。您可以看到在本例中该位置即是
    // 图标中央下端的尖角位置。
    anchor: new BMapGL.Size(10, 25),
    // 设置图片偏移。
    // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
    // 需要指定大图的偏移位置，此做法与css sprites技术类似。
    imageOffset: new BMapGL.Size(0, 0)   // 设置图片偏移
});
// 创建标注对象并添加到地图
var marker = new BMapGL.Marker(point, {icon: myIcon});
map.addOverlay(marker);

marker.addEventListener("click", function(){
    alert("您点击了标注");
});

var polyline = new BMapGL.Polyline([
    new BMapGL.Point(116.399, 39.910),
    new BMapGL.Point(116.405, 39.920),
    new BMapGL.Point(116.425, 39.900)
], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
map.addOverlay(polyline);

var polygon = new BMapGL.Polygon([
    new BMapGL.Point(116.387112,39.920977),
    new BMapGL.Point(116.385243,39.913063),
    new BMapGL.Point(116.394226,39.917988),
    new BMapGL.Point(116.401772,39.921364),
    new BMapGL.Point(116.41248,39.927893)
], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
map.addOverlay(polygon);

function overlayCursor(val) {
    if (val === 1) {
        map.setOverlayMoveCursor('url("https://cdn-app.nio.com/PE/2022/2/23/b7d13dfd-b564-4a94-a3ae-7a1e6741daab.svg") 40 53, crosshair');
    } else {
        map.setOverlayMoveCursor('pointer');
    }
}
</script>

</body>
</html>